<template>
  <el-card class="box-card" style="width: 100%;">
    <!-- 面包屑组件 -->
    <el-header style="height: 20px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>CPI分析</el-breadcrumb-item>
        <el-breadcrumb-item>CPI预测分析</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <!-- 表格工具栏-条件查询 -->
      <el-row>
        <!-- 类别下拉框 -->
        <el-col :span="6">
          <span>类别：</span>
          <el-select v-model="query.type" filterable placeholder="请选择" @change="listPage()">
            <el-option v-for="(item,index) in typeList" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-col>
        <!-- 地区下拉框 -->
        <el-col :span="6" :offset="2">
          <span>地区：</span>
          <el-select @change="listPage()" v-model="query.province" filterable placeholder="请选择">
            <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :offset="2">
          <span>时间：</span>
          <el-select @change="listPage()" v-model="query.time" filterable placeholder="请选择">
            <el-option :value="6" label="未来6个月"></el-option>
            <el-option :value="12" label="未来12个月"></el-option>
          </el-select>
        </el-col>

      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6" verticle-align>
          <!-- 表格 -->
          <el-button class="icon" @click="showPicture(0)">&#xe65f;</el-button>
          <!-- 柱状图 -->
          <el-button class="icon" @click="showPicture(1)">&#xeb96;</el-button>
          <!-- 折线图 -->
          <el-button class="icon" @click="showPicture(2)">&#xeb97;</el-button>
        </el-col>
        <el-col :span="14" :offset="2">
          <span>算法：</span>
          <el-select @change="listPage()" v-model="query.plan" multiple filterable placeholder="请选择" :style="{width: myWidth+'px'}">
            <el-option :value="'a'" label="XGBoost算法"></el-option>
            <el-option :value="'b'" label="非线性SVM算法"></el-option>
            <el-option :value="'c'" label="Softmax回归分类预测算法"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 表格组件 -->
      <el-table :data="tableData" style="width: 100%;margin: 20px 0px;">
        <el-table-column prop="plan" label="算法类型"></el-table-column>
        <el-table-column v-for="(item,index) in timeList" :prop="item" :key="index" :label="item" :value="item">
        </el-table-column>
      </el-table>
      <!-- 显示图表(柱状图、折线图、饼状图) -->
      <div id="typePicture" style="width:80%;height:500px;margin: auto auto;" v-show="flagPicture"></div>
    </el-main>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        query: {
          province: '全国',
          time: 6,
          plan: ["a"],
          type: "居民消费价格指数",
        },
        timeList: [], //后端传递的属性名（时间名）
        provinceList: [],
        valueList: {
          a: [],
          b: [],
          c: []
        }, //后端传递的属性值（时间对应的cpi）
        pieList: [], //饼图显示的list
        flagPicture: 1,
        min: 97,
        max: 108,
        radioFlag: null,
        radioSelected: null,
        options1: [],
        typeList: [],
        name:[]
      }
    },
    methods: {
      showPicture(flag) {
        this.flagPicture = flag
        let myEcharts = this.$echarts.init(document.getElementById(("typePicture")))
        myEcharts.clear();
        let option = {};
        if (flag === 0) {
          this.radioFlag = false
          return;
        } else if (flag == 1) {
          this.radioFlag = true
          option = {
            tooltip: {
              trigger: 'axis',
              position: function(point, params, dom, rect, size) {
                //  size为当前窗口大小
                if ((size.viewSize[0] / 2) >= point[0]) {
                  //其中point为当前鼠标的位置
                  return [point[0] + 50, '10%'];
                } else {
                  //其中point为当前鼠标的位置
                  return [point[0] - 200, '10%'];
                }
              }
            },
            legend: {
              data: this.name
            },
            xAxis: {
              type: 'category',
              data: this.timeList
            },
            yAxis: {
              min: this.min,
              max: this.max,
              interval: 1,
              type: 'value'
            },
            series: [{
                name: 'XGBoost算法',
                data: this.valueList.a,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              },
              {
                name: '非线性SVM算法',
                data: this.valueList.b,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              },
              {
                name: 'Softmax回归分类预测算法',
                data: this.valueList.c,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              }
            ]
          };
        } else if (flag === 2) {
          this.radioFlag = true
          option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: this.name
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.timeList
            },
            yAxis: {
              min: this.min,
              max: this.max,
              interval: 1,
              type: 'value'
            },
            series: [{
                name: 'XGBoost算法',
                type: 'line',
                data: this.valueList.a
              },
              {
                name: '非线性SVM算法',
                type: 'line',
                data: this.valueList.b
              },
              {
                name: 'Softmax回归分类预测算法',
                type: 'line',
                data: this.valueList.c
              }
            ]
          };
        }
        myEcharts.setOption(option, true);
      },
      // 用户定义的前端请求方法
      listPage() {
        if (this.query.plan.length === 0) {
          this.$message({
            message: '警告，请选择算法！！',
            type: 'error'
          });
          return;
        }
        this.$http.get('apis/cpi/predict', {
          params: {
            province: this.query.province,
            type: this.query.type,
            time: this.query.time,
            plan: this.query.plan.join(",")
          }
        }).then(res => {
          this.valueList = {
            a: [],
            b: [],
            c: []
          };
          this.tableData = [];
          this.name=[]

          let arr = Object.getOwnPropertyNames(res.data[this.query.plan[0]])
          arr = arr.filter((item) => {
            return item != 'plan';
          });
          this.timeList = arr.sort((a, b) => a < b ? 1 : a > b ? -1 : 0)

          for (let i in this.query.plan) {
            let d = res.data[this.query.plan[i]];
            this.tableData.push(d);
            this.name.push(d.plan);
            //获取时间线list所对应的cpilist
            for (let j = 0; j < this.timeList.length; j++) {
              let x = this.timeList[j]
              this.valueList[this.query.plan[i]][j] = d[x]
            }

            let min = Math.floor(Math.min.apply(null, this.valueList[this.query.plan[i]])) - 1;
            let max = Math.ceil(Math.max.apply(null, this.valueList[this.query.plan[i]])) + 1;
            if (i === '0') {
              this.min = min;
              this.max = max;
            } else {
              this.min = Math.min(this.min, min);
              this.max = Math.max(this.max, max);
            }
          }

          this.showPicture(this.flagPicture)
        })
      },
      getalltype() {
        this.$http.get('apis/cpi/alltype')
          .then(res => {
            this.typeList = res.data
          })
      },
      listProvince() {
        this.$http.get('apis/cpi/allprovince')
          .then(res => {
            this.provinceList = res.data;
          })
      },
    },
    computed:{
      myWidth(){
        if(this.query.plan.length===2){
          return 400
        }else if(this.query.plan.length===3){
          return 500
        }else{
          return 250
        }
      }
    },
    created() {
      this.listPage()
      this.listProvince()
      this.getalltype();
    }
  }
</script>

<style scoped>
  .icon {
    font-size: 30px;
    border: 0px;
    padding: 10px;
  }
</style>
